<template>
  <div>
    <div v-show="simplesearch">
      <p>
        <el-select v-model="value1" clearable placeholder="分类">
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        &nbsp;&nbsp;
        <el-select v-model="value2" placeholder="情感分析" clearable>
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        &nbsp;&nbsp;
        <span class="demonstration"></span>
        <el-date-picker
          v-model="value3"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
        >
        </el-date-picker>
        &nbsp;&nbsp;
        <el-button
          class="bbutton"
          @click="advanced_option"
          icon="el-icon-search"
          >高级筛选</el-button
        >
        &nbsp;&nbsp;
        <button class="bbutton" @click="simple_find" style="float: right">
          查询
        </button>
      </p>
    </div>
    <div v-show="advancedsearch">
      <el-input
        v-model="advanced_input"
        placeholder="请输入关键字,多个关键词之间用空格分隔"
        style="width: 500px"
      ></el-input>
      <button class="bbutton" @click="simple_option" style="float: right">
        返回
      </button>
      <button class="bbutton" @click="advanced_find">查询</button>
    </div>
    <div>
      <el-table
        :data="
          tableData.slice((currentPage - 1) * pageSize, pageSize * currentPage)
        "
        border
        style="width: 100%"
        height="850"
      >
        <el-table-column prop="news_id" label="id" width="100">
        </el-table-column>
        <el-table-column prop="title" label="标题" width="180">
        </el-table-column>
        <el-table-column prop="source" label="源"> </el-table-column>
        <el-table-column prop="url" label="url"> </el-table-column>
        <el-table-column prop="publish_time" label="发行时间">
        </el-table-column>
        <el-table-column prop="category" label="种类"> </el-table-column>
        <el-table-column
          prop="content"
          label="内容"
          width="110"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column prop="keywords" label="关键字"> </el-table-column>
        <el-table-column prop="sentiment" label="情感分类"> </el-table-column>
        <el-table-column label="操作" width="165">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button size="mini" @click="handleScan(scope.$index, scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: center; margin-top: 30px">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          @current-change="current_change"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
function Dateformat(date) {
  var d = new Date(date),
    month = "" + (d.getMonth() + 1),
    day = "" + d.getDate(),
    year = d.getFullYear();

  if (month.length < 2) month = "0" + month;
  if (day.length < 2) day = "0" + day;

  return [year, month, day].join("-");
}
export default {
  data() {
    return {
      simplesearch: true,
      advancedsearch: false,
      form: {
        id: "",
        title: "",
        source: "",
        url: "",
        publish_time: "",
        category: "",
        content: "",
        keywords: "",
        sentiment: "",
      },
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      options1: [
        {
          value: "财经",
          label: "财经",
        },
        {
          value: "社会",
          label: "社会",
        },
        {
          value: "体育",
          label: "体育",
        },
        {
          value: "多媒体",
          label: "多媒体",
        },
        {
          value: "生活",
          label: "生活",
        },
        {
          value: "娱乐",
          label: "娱乐",
        },
        {
          value: "汽车",
          label: "汽车",
        },
        {
          value: "科技",
          label: "科技",
        },
        {
          value: "旅游",
          label: "旅游",
        },
        {
          value: "房产",
          label: "房产",
        },
        {
          value: "家居",
          label: "家居",
        },
        {
          value: "军事",
          label: "军事",
        },
        {
          value: "数码",
          label: "数码",
        },
      ],

      options2: [
        {
          value: "负向",
          label: "负向",
        },
        {
          value: "正向",
          label: "正向",
        },
      ],

      value: "",
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value1: "",
      value2: "",
      value3: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      value4: [],
      advanced_input: "",
    };
  },
  methods: {
    simple_option() {
      this.simplesearch = !this.simplesearch;
      this.advancedsearch = !this.advancedsearch;
    },
    advanced_option() {
      console.log("这是高级筛选");
      this.simplesearch = !this.simplesearch;
      this.advancedsearch = !this.advancedsearch;
    },
    handleScan(index, row) {
      // console.log(index, row);
      const self = this;
      this.$router.push({
        name: "NewsScan",
        query: {
          id: row.news_id,
          title: row.title,
          source: row.source,
          url: row.url,
          publish_time: row.publish_time,
          category: row.category,
          content: row.content,
          keywords: row.keywords,
          sentiment: row.sentiment,
        },
      });
    },
    simple_find() {
      this.value4 = this.value3;
      if (this.value4 == null) {
        console.log("value3 is null");
        this.value3 = null;
        this.value4 = [
          new Date(1950, 10, 10, 10, 10),
          new Date(2100, 10, 11, 10, 10),
        ];
      }
      console.log("this.value1", this.value1);
      console.log("this.value2", this.value2);
      console.log("this.value3", this.value3);
      console.log("this.value4", Dateformat(this.value4[0]));
      const self = this;
      self
        .$axios({
          method: "post",
          url: "/api/news/simple_search",
          data: {
            // start_time:self.,
            category: self.value1,
            sentiment: self.value2,
            startTime: Dateformat(this.value4[0]),
            endTime: Dateformat(this.value4[1]),
          },
        })
        .then((resp) => {
          alert(resp.data.message);
          // console.log("resp:",resp)
          this.tableData = resp.data.data;
          console.log("total:", this.total);
          this.total = this.tableData.length;
        });
    },
    advanced_find() {
      if (this.advanced_input.trim() == "") alert("输入不能为空！");
      else {
        const self = this;
        console.log("self.advanced_input.trim():", self.advanced_input.trim());
        self
          .$axios({
            method: "post",
            url: "/api/news/advanced_search",
            data: {
              keywords: self.advanced_input.trim(),
            },
          })
          .then((resp) => {
            // alert(resp.data.message)
            this.tableData = resp.data.data;
            console.log("total:", this.total);
            this.total = this.tableData.length;
          });
      }
    },

    current_change: function (currentPage) {
      this.currentPage = currentPage;
    },
    handleEdit(index, row) {
      const self = this;
      self
        .$axios({
          method: "post",
          url: "/api/news/edit",
          data: {
            news_id: row.news_id,
            name: "title",
            cont: row.title,
          },
          headers: {
            Authorization: window.sessionStorage.getItem("token"),
          },
        })
        .then((res) => {
          // console.log("返回的东西：",res)
          if (res.data.statusCode == 0) {
            alert(res.data.message);
          } else {
            //alert(res.data.message)
            this.$router.push({
              name: "NewsEdit",
              query: {
                id: row.news_id,
                title: row.title,
                source: row.source,
                url: row.url,
                publish_time: row.publish_time,
                category: row.category,
                content: row.content,
                keywords: row.keywords,
                sentiment: row.sentiment,
              },
            });
          }
        })
        .catch((e) => {
          alert(e.response.data.message);
        });
    },
  },
};
</script>

